import React, { useState } from 'react';
import { connect } from 'dva'
import BasePage from './BasePage'
import AppMenu from '../components/appMenu'
import { Button, Input } from 'antd'

class PolicySimulationtoolPage extends React.Component {
    constructor(props) {
        super(props),
            this.state = {
                toolHtml: ""
            }
    }

    openToolHtml = () => {
        if (this.props.toolHtml) {
            window.open(this.props.toolHtml, '_blank')
        }
    }

    setToolHtml = e => {
        this.setState({
            toolHtml: e.target.value
        })
    }

    repairToolHtml = () => {
        this.props.dispatch({
            type: "policy/repairToolHtml",
            data: { url: this.state.toolHtml }
        })
    }

    componentDidMount() {
        this.props.dispatch({
            type: "policy/getToolHtml"
        })
    }

    renderAdminstratorPage = user => {
        if (user.userType == 3) {
            return (
                <div>
                    <p style={{ marginTop: 20 }}>当前的外部工具链接为：{this.props.toolHtml}</p>
                    <Input style={{ width: 400 }} onChange={this.setToolHtml}></Input>
                    <Button style={{ marginLeft: 20 }} onClick={this.repairToolHtml}>修改链接</Button>
                </div>
            )
        }
    }

    render() {
        return (
            <BasePage backGroundPictureUrl={require('../assets/imgs/policySimulationTitle.png')}>
                <AppMenu isPolicySimulationPage={true}></AppMenu>
                <Button style={{ marginTop: 20 }} onClick={this.openToolHtml}>模型工具</Button>
                {this.renderAdminstratorPage(this.props.user)}
            </BasePage>
        )
    }
}

const mapStateToProps = state => {
    let user = state.app.user
    let toolHtml = state.policy.toolHtml

    return {
        user,
        toolHtml
    }
}

export default connect(mapStateToProps)(PolicySimulationtoolPage)